
d3.csv('./data/电站地理位置及资金分布.csv').then(function(data) {
    data.forEach(function(d) {
        const lat = parseFloat(d.纬度)-0.001;
        const lng = parseFloat(d.经度);
        
        // 获取总投资和总发电量数据
        const totalInvestment = parseFloat(d['总投资(万元)']);  
        const totalGeneration = parseFloat(d['总发电量(万千瓦时)']);
        
         // 根据总投资来决定图标的颜色
        const iconColor = getIconColor(totalInvestment);
        
        // 根据总发电量来决定图标的大小
        const iconSize = getIconSize(totalGeneration);

        // 创建一个 Popup
        const popup = new mapboxgl.Popup({ offset: 50 })
            .setHTML(`
                <strong>电站名称:</strong> ${d.电站名称}<br>
                <strong>经纬度:</strong> ${lat.toFixed(2)}, ${lng.toFixed(2)}<br>
            `); // 弹出框内容

        // 创建标记并绑定 Popup
        let maker = new mapboxgl.Marker({
            element: createCustomIcon(iconColor,iconSize,'./images/sun.png')
        })
            .setLngLat([lng, lat]) // 设置经纬度
            .setPopup(popup) // 绑定弹出框
            .addTo(map);
        
       
        
    });
}).catch(function(error) {
    console.error('读取 CSV 文件失败:', error);

});

// 创建一个自定义图标的函数
function createCustomIcon(color,size, backgroundImage) {
    // 创建一个新的 div 元素来作为标记的图标
    const div = document.createElement('div');
    div.className = 'custom-marker';

    if (backgroundImage) {
        div.style.backgroundImage = `url(${backgroundImage})`;  // 设置背景图
        div.style.backgroundSize = '60%';  // 保证背景图充满整个标记
        div.style.backgroundPosition = 'center';  // 将背景图居中显示
        div.style.backgroundRepeat = 'no-repeat';  // 防止背景图重复
    }


    div.style.backgroundColor = color;
    div.style.width = `${size}px`;  // 设置图标大小
    div.style.height = `${size}px`; // 设置图标大小
    div.style.borderRadius = '50%'; // 使图标变为圆形
    div.style.zIndex = '100';

    return div;
}
// 根据总投资决定颜色
function getIconColor(investment) {
const colorArray = [
{ threshold: 40, color: '#cbead1' },  
{ threshold: 80, color: '#a8e087' },  
{ threshold: 120, color: '#73c088' },    
{ threshold: 160, color: '#397d54' },    
{ threshold: 200, color: '#235d3a' },    
{ threshold: 240, color: '#252525' },    
];
for (let i = 0; i < colorArray.length; i++) {
if (investment < colorArray[i].threshold) {
    return colorArray[i].color;
}
}
return colorArray[colorArray.length - 1].color; 
}

// 根据总发电量决定大小
function getIconSize(generation) {
// 假设总发电量的范围是 [minGeneration, maxGeneration]，你可以根据数据调整这两个值
const minGeneration = 0.5;    // 最小总发电量
const maxGeneration = 7;    // 最大总发电量

// 确保总发电量在合理范围内
if (generation < minGeneration) {
generation = minGeneration;
} else if (generation > maxGeneration) {
generation = maxGeneration;
}

// 计算图标大小，映射到 20px 到 50px 之间
const size = 20 + (generation - minGeneration) / (maxGeneration - minGeneration) * (50 - 20);

return Math.round(size);  // 返回四舍五入后的大小
}